<template>
  <div id="app">
    <h1>我是网站标题</h1>

    <!-- 
      1. 在 router-link 配置
        to              点击跳转的页面
        tag             默认是 a标签，使用tag
        replace         不可返回
        active-class    点击后的样式
    -->
    <!-- <router-link to="/home" tag='button' replace active-class="active">首页</router-link>
    <router-link to="/about" tag='button' replace active-class="active">关于</router-link> -->

    <!-- 2. 在 路由配置 linkActiveClass 让所有 router-link 更改样式 -->
    <!-- <router-link to="/home" tag='button' replace>首页</router-link>
    <router-link to="/about" tag='button' replace>关于</router-link> -->

    <!-- 3. 按钮点击 跳转页面 -->
    <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>
    <!-- <router-link to="/user/zhangsan" tag='button'>用户</router-link> -->
    <!-- <router-link :to="'/user/'+userId" tag='button'>用户</router-link> -->
    <!-- <router-link :to="{path: '/profile', query:{name: 'srx', age: 18, height: 1.88}}" tag='button'>档案</router-link> -->

    <button @click='userClick'>用户</button>
    <button @click='profileClick'>档案</button>
    <keep-alive exclude="profile">
      <router-view></router-view>
    </keep-alive>
    <br>
    <img :src="imageURL" alt="a">
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userId: 'list',
      userId22: 'gogogo',
      userId33: 'file?a=b&c=d',
      imageURL: 'https://i.keaitupian.net/up/10/cb/4e/1dae9208ee5e44fb13e6689b524ecb10.jpg.300.jpg'
    }
  },
  methods: {
    homeClick() {
      
      // this.$router.replace('/home')


      // this.$router.push('/home')
      //这里一直有报错 , 看readme.md
      //vue-router.esm.js?8c4f:2089 Uncaught (in promise)
      // 我点击`首页` 在点击 `新闻`
      // 正常需求情况下，不应有这种操作，应该按钮置灰不可点击
      //    因为当前处于活跃状态
      let path = '/home/news';
      let route = this.$route || {};
      let currentPath = route.path || 'unkonw'
      console.log('homeClick() =>currentPath', currentPath)
      if(path != currentPath && currentPath != 'home' && currentPath != 'unkonw') {
        // this.$router.push('/home/news')
        this.$router.push('/home')
      }
      else {
        // console.log('不能再点击了，要是不处理你，就error拉')
      }
    },
    aboutClick() {
      this.$router.push('/about')
      // this.$router.replace('/about')
    },
    userClick() {
      //params
      // this.$router.push('/user/'+ this.userId)
      // this.$router.push('/user/'+ this.userId22)
      this.$router.push('/user/'+ this.userId33)
    },
    profileClick() {
      // query
      this.$router.push({
        path: '/profile',
        query: {
          name: '李四',
          age: 20,
          height: 5
        }
      })
    }
  }
}
</script>

<style>
  .active {
    color: red;
  }
</style>